<div class="swiperLayer">
  <div class="PB15 outHide">
    <div class="controlTitle textTitle">轮播图</div>
    <div class="closeLayer" ng-click="ifShowSwiperEditLayer()"><i class="iconfont bigSize">&#xe608;</i></div>
    <div class="main clear">
      <div class="chooseSize clear">
        <div class="fl">
          <span class="leftSpan">切换间隔</span><input type="text" oninput="/^(0|[1-9][0-9]*)$/.test(this.value) ? this.value : this.value=''" ng-blur="turnToThree()" ng-model="swiperData.switchTime"><span>秒(最小3)</span>
        </div>
        <div class="fl centerDiv">
          <span class="leftSpan">切换效果</span>
          <select name="" id="" ng-model="swiperData.switchView">
            <option value="{{select.id}}" ng-repeat="select in effects">{{select.value}}</option>
            <!-- <option value="1">从右往左</option>
            <option value="2">淡入淡出</option> -->
            
          </select>
        </div>
        <div class="fl">
          <span class="leftSpan">上边距</span><input type="text" oninput="/^(0|[1-9][0-9]*)$/.test(this.value) ? this.value : this.value=''" ng-model="swiperData.upPadding"><span>px</span>
        </div>
        <div class="fl" style="padding-left:20px;">
          <span class="leftSpan">下边距</span><input type="text" oninput="/^(0|[1-9][0-9]*)$/.test(this.value) ? this.value : this.value=''" ng-model="swiperData.downPadding"><span>px</span>
        </div>
        <div class="fl centerDiv">
          <span class="leftSpan">宽高比例</span>
          <select name="" id="" ng-model="widthHeight">
            <option value="{{select.id}}" ng-repeat="select in sizes">{{select.value}}</option>
            <!-- <option value="1">2:1</option>
            <option value="2">1:1</option> -->
          </select>
        </div>
      </div>
      <div class="upLoad">
        <div class="titleArea clear">
          <span class="leftPart fl">图片</span>
          <span class="centerPart fl">链接</span>
          <span class="rightPart fl">操作</span>
        </div>
        <ul class="picInformation">
          <li class="clear" ng-repeat="preImg in swiperData.bannerList track by $index">
            <span class="leftPart fl">
              <img ng-src="{{preImg.bannerImg}}" style="width:56px;height:40px;" alt="">
              <!-- <span class="reUpLoad">重新上传</span> -->
              <div up-load multi="1" draggable="false" data='$parent.thisImgSrc' size="1024" ratio='' change='thisUploadSuccess($index)' class="previewMain reUpLoad">
                <label class="upLoadImg reUpLoad" for="oneUploadFile{{$index}}">
                  重新上传
                  <input type="file"  accept="image/png,image/jpg,image/jpeg" id="oneUploadFile{{$index}}" />
                </label>
              </div>
            </span>
            <span class="centerPart fl">
              <input type="text" placeholder="请输入网址" ng-model="preImg.bannerLink" style="margin-top:10px;">
            </span>
            <span class="rightPart fl clear">
              
              <span class="deleteBtn fr" ng-click="deleteEvent($index)"><i class="iconfont">&#xe8e5;</i></span>
              <span class="fr" ng-class="{'nextBtn2':$index===swiperData.bannerList.length-1,'nextBtn1':$index!==swiperData.bannerList.length-1}" ng-click="downEvent($index)"></span>
              <span class="fr" ng-class="{'prevBtn2':$index===0,'prevBtn1':$index!==0}" ng-click="upEvent($index)"></span>
              
            </span>
          </li> 
        </ul>
        <div up-load multi="100" draggable="false" data='imgData' size="1024" ratio='' change='uploadSuccess()' class="previewMain addPic">
          <label class="upLoadImg addBtn" for="uploadFile">
            添加图片
            <input type="file" accept="image/png,image/jpg,image/jpeg" id="uploadFile" />
          </label>
          <span class="remind">请上传JPG、JPEG、PNG和GIF格式的图片、大小不超过1M</span>
        </div>
      </div>
      <div class="warning" ng-if="showWarning">创建轮播图至少需要一张图片，请上传图片</div>
    </div>  
    <div id="imgContainer"></div>
    <div class="button btns">
      <div class="btnGroup">
          <button class="btn btn-radius btn-lg  back" ng-click="ifShowSwiperEditLayer()">取消</button>
          <button class="btn btn-radius btn-lg btn-warning" ng-click="sureEvent()">确认</button>
      </div> 
    </div>
  </div>
</div>
<style>
.Layer .layerBody{
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 30px 30px 60px 30px;
}
.textTitle {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #ffb135;
  position: relative;
  padding-left: 10px;
}

.textTitle:before {
  content: '';
  height: 20px;
  width: 4px;
  background: #ffb135;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
}
.Layer .layerBody .textTitle{
  margin-top: 0px;
}
.Layer .closeLayer{
  width:20px;
  height:28px;
  position:absolute;
  right:30px;
  top:30px;
  cursor: pointer;
}
.Layer .btns{
  margin-top: 60px;
}
.btns .btnGroup{
  text-align: center;
  width:auto;
  overflow: hidden;
  position: relative;
  left:50%;
  transform: translateX(-50%);
}
.btns .back {
  border: 1px solid #ffb135;
  background-color: #ffffff;
  color: #ffb135;
}

.swiperLayer .main{
  width:710px;
  margin-top:20px;
}
.chooseSize .fl{
  width:33%;
  font-size: 14px;
  margin-top: 16px;
}
.chooseSize .centerDiv{
  text-align: center;
}
.chooseSize .leftSpan{
  width:64px;
  text-align: right;
}
.chooseSize input{
  width:90px;
  margin:0 10px;
  height:32px;
  color:#393d40;
}
.chooseSize select{
  width:118px;
  height:32px;
  color:#393d40;
  /*background-image: url(./res/img/icon-down.png);*/
  /*background-position: right center;*/
  /*background-repeat: no-repeat;*/
}
.upLoad{
  border:1px solid #d2d2d2;
  font-size: 16px;
  margin-top:30px;
}
.upLoad ul{
  border-top:1px solid #d2d2d2;
}
.upLoad li{
  height:56px;
  line-height: 56px;
  font-size: 14px;
  border-bottom: 1px solid #d2d2d2;
  overflow: hidden;
}
.upLoad .titleArea{
  height:56px;
  font-size: 16px;
  line-height: 56px;
  background-color: #f1f1f1;
}

.upLoad .picInformation{
  max-height:170px;
  overflow-y: auto;
}
.upLoad .leftPart{
  width:30%;
  padding-left:30px;
}
.upLoad .centerPart{
  width:40%;
  height:56px;
  line-height: 56px;
}
.upLoad .rightPart{
  width:25%;
  text-align: right;
  padding-right:30px;
}
.upLoad .picInformation .leftPart img{
  width:56px;
  height:40px;
  margin-right:16px;
}
.upLoad .picInformation .leftPart .reUpLoad{
  font-size: 14px;
  color:#ffb135;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}
.upLoad .picInformation .centerPart input{
  height:30px;
  width:100%;
}
.upLoad .picInformation .rightPart span{
  width:20px;
  height:56px;
  margin-left:16px;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
}
.upLoad .picInformation .rightPart .prevBtn1{
  background-image: url(./res/img/up-icon1.png);
}
.upLoad .picInformation .rightPart .prevBtn2{
  background-image: url(./res/img/up-icon2.png);
  cursor: default;
}
.upLoad .picInformation .rightPart .nextBtn1{
  background-image: url(./res/img/down-icon1.png);
}
.upLoad .picInformation .rightPart .nextBtn2{
  background-image: url(./res/img/down-icon2.png);
  cursor: default;
}
.upLoad .addPic{
  height:56px;
  line-height: 56px;
}
.upLoad .addPic .addBtn{
  margin-left:30px;
  margin-right:20px;
  width:90px;
  height:32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color:#ffb135;
  border:1px solid #ffb135;
  border-radius: 4px;
  cursor: pointer;
}
.upLoad .addPic .remind{
  font-size: 14px;
  color:#b3b3b3;
}
.warning{
  font-size: 14px;
  color:red;
}
  input[type='file']{
    display: none;
  }
</style>